<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="openAddCateDialog()">添加分类</el-button>
        </el-col>
      </el-row>

      <el-table :data="cateList" :tree-props="{ children: 'children' }" row-key="cat_id">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="slotProps">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-success"
              circle
              v-if="slotProps.row.cat_deleted"
            ></el-button>
            <el-button type="danger" size="mini" icon="el-icon-error" circle v-else></el-button>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="slotProps">
            <el-tag
              :type="['primary', 'success', 'warning'][slotProps.row.cat_level]"
              v-text="['一级', '二级', '三级'][slotProps.row.cat_level]"
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryInfo.pagesize"
        @current-change="onChangePagenum($event)"
        @size-change="onChangePagesize($event)"
      ></el-pagination>
    </el-card>

    <el-dialog title="添加分类" :visible.sync="addCateDialog.visible" width="50%" @close="onCloseAddCateDialog()">
      <div>
        <el-form ref="addCateForm" :model="addCateDialog.formData" :rules="addCateDialog.formRules" label-width="80px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateDialog.formData.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-cascader
              v-model="addCateDialog.formData.cat_pid"
              :options="addCateDialog.cateList"
              :props="{ children: 'children', expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"
              change-on-select
              clearable
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="addCate()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Cate',
  data() {
    return {
      addCateDialog: {
        visible: false,
        formData: {
          cat_name: '',
          cat_pid: []
        },
        formRules: {
          cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
        },
        cateList: []
      },
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 3
      },
      cateList: [],
      total: 0
    }
  },
  methods: {
    onCloseAddCateDialog() {
      this.$refs.addCateForm.resetFields()
    },
    async addCate() {
      const ok = await this.$refs.addCateForm.validate().catch(err => err)
      if (!ok) return
      const formData = this.addCateDialog.formData
      const len = formData.cat_pid.length
      const { data: res } = await this.$http.post('/categories', {
        cat_pid: len === 0 ? 0 : formData.cat_pid[len - 1],
        cat_name: formData.cat_name,
        cat_level: len
      })
      if (res.meta.status !== 201) {
        return this.$message.error('分类添加失败')
      }
      this.$message.success('分类添加成功')
      this.loadCateList()
      this.addCateDialog.visible = false
    },
    async openAddCateDialog() {
      const { data: res } = await this.$http.get('/categories', { params: { type: 2 } })
      if (res.meta.status !== 200) {
        return this.$message.error('父级分类列表获取失败')
      }

      this.addCateDialog.cateList = res.data

      this.addCateDialog.visible = true
    },
    onChangePagesize(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.loadCateList()
    },
    onChangePagenum(pagenum) {
      this.queryInfo.pagenum = pagenum
      this.loadCateList()
    },
    async loadCateList() {
      const { data: res } = await this.$http.get('/categories', { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('分类列表获取失败')
      }

      this.cateList = res.data.result
      this.total = res.data.total
    }
  },
  created() {
    this.loadCateList()
  }
}
</script>

<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
</style>
